import { ConfigService } from '../../../../core/common/config.service';
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Http } from '@angular/http';
import { ECharts } from 'echarts-ng2';
import { TranslateService } from '@ngx-translate/core';
@Component({
      selector: 'app-salesportal',
      templateUrl: './salesportal.component.html',
      styleUrls: ['./salesportal.component.scss']
})
export class SalesPortalComponent implements OnInit, OnDestroy {
      @ViewChild('kehufenbu') kehufenbu: ECharts;
      @ViewChild('dingdanshouru') dingdanshouru: ECharts;
      public destroy = false;
      public shuju: any;
      public dashabi: any;
      public zhu1: any;
      public singleData1: any;
      public singleData2: any;
      public meigui1;
      public meigui2 = [];
      public zhu = {
            title: {
                  text: '月度订单收入',
            },
            color: ['#3398DB'],
            tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                        type: 'shadow'
                  }
            },
            grid: {
                  left: '3%',
                  right: '4%',
                  containLabel: true
            },
            xAxis: [
                  {
                        type: 'category',
                        data: [],
                        axisTick: {
                              alignWithLabel: true
                        }
                  }
            ],
            yAxis: [
                  {
                        type: 'value'
                  }
            ],
            series: [
                  {
                        name: '',
                        type: 'bar',
                        barWidth: '60%',
                        data: []
                  }
            ]
      };
      public meigui = {
            title: {
                  text: '',
            },
            legend: {
                  // orient: 'vertical',
                  x: '4%',
                  top: '11%',
                  data: []
            },
            tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            color: ['#ED5565', '#FFCE54', '#48CFAD', '#5D9CEC', '#EC87C0', '#FC6E51', '#A0D468', '#4FC1E9', '#AC92EC'],
            series: [
                  {
                        name: '',
                        type: 'pie',
                        data: [],
                        radius: ['0', '40%'],
                        center: ['50%', '60%'],
                        roseType: 'area',
                        itemStyle: {
                              normal: {
                                    // color: 'white',
                                    borderColor: 'white'
                              }
                        },
                        labelLine: {
                              normal: {
                                    show: false
                              }
                        },
                        label: {
                              normal: {
                                    show: false
                              }
                        }
                  },
                  {
                        name: '',
                        type: 'pie',
                        data: [],
                        radius: ['60%', '70%'],
                        center: ['50%', '60%'],
                        zlevel: -2,
                        itemStyle: {
                              normal: {
                                    // color: '#22C3AA',
                                    borderColor: 'white'
                              }
                        },
                        label: {
                              normal: {
                                    // position: 'inside'
                                    show: false
                              }
                        }
                  }
            ]
      };
      constructor(public configService: ConfigService, public http: Http, private translate: TranslateService) {

      }
      ngOnInit() {
            $(window).resize(() => {
                  if (!this.destroy) {
                        this.kehufenbu.resize();
                        this.dingdanshouru.resize();
                  }
            });
            this.translate.get('home.homepage.salesportal.middle').subscribe((res: any) => {
                  this.meigui.title.text = res.customerDistribution;
                  this.meigui.series[0].name = res.customerTurnover;
                  this.meigui.series[1].name = res.industryCustomers;
            });
            this.translate.get('home.homepage.salesportal.right').subscribe((res: any) => {
                  this.zhu.title.text = res.monthlyOrderIncome;
                  this.zhu.series[0].name = res.orderRevenue;
                  this.zhu.xAxis[0].data = res.month;
            });
            this.data1();
            this.data2();
            this.data3();
            this.initTableData4();
            this.initTableData5();
      }
      ngOnDestroy() {
            this.destroy = true;
      }
      public data1() {
            const url = this.configService.get('url') + '?service=SaleDashboard&method=getCountSale';
            this.http.post(url, null).toPromise().then(data => {
                  if (data.json().code === '0000') {
                        this.shuju = data.json().info;
                        // console.log(this.shuju);
                  }else {
                        console.log(data.json().message);
                  }
            });
      }
      public data2() {
            const url = this.configService.get('url') + '?service=SaleDashboard&method=getCustIndustryFee';
            const me = this;
            this.http.post(url, null).toPromise().then(data => {
                  if (data.json().code === '0000') {
                        this.meigui1 = data.json().info;
                        // console.log(this.meigui1);
                        const array = [];
                        this.meigui1.forEach(function (item, i) {
                              item.name = me.selIndustry(item.name);
                              array.push(item.name);
                        });
                        this.meigui.series[0].data = this.meigui1;
                        // console.log(array);
                        let count = 1;
                        const yuansu = new Array();
                        const sum = new Array();
                        const series = [];
                        for (let i = 0; i < array.length; i++) {
                              for (let j = i + 1; j < array.length; j++) {
                                    if (array[i] === array[j]) {
                                          count++;
                                          array.splice(j, 1);
                                          j--;
                                    }
                              }
                              yuansu[i] = array[i];
                              sum[i] = count;
                              count = 1;
                        }
                        // console.log(sum);
                        yuansu.forEach(function (item, i) {
                              series.push({
                                    'name': yuansu[i],
                                    'value': sum[i]
                              });
                        });
                        // console.log(series);
                        this.meigui.legend.data = yuansu;
                        this.meigui.series[1].data = series;
                        this.kehufenbu.setOption(this.meigui);
                  }else {
                        console.log(data.json().message);
                  }
            });
      }
      public data3() {
            const url = this.configService.get('url') + '?service=SaleDashboard&method=getSaleCountByMonth';
            this.http.post(url, null).toPromise().then(data => {
                  if (data.json().code === '0000') {
                        this.zhu1 = data.json().info;
                        // console.log(this.zhu1);
                        // this.zhu.xAxis[0].data = this.zhu1.month;
                        this.zhu.series[0].data = this.zhu1.data;
                        this.dingdanshouru.setOption(this.zhu);
                  }else {
                        console.log(data.json().message);
                  }
            });
      }
      public initTableData4(): void {
            const url = this.configService.get('url') + '?service=SaleDashboard&method=getCustFeeTop5';
            const me = this;
            this.http.post(url, null).toPromise().then(data => {
                  if (data.json().code === '0000') {
                        this.singleData1 = data.json().info;
                        // console.log(this.singleData1);
                        this.singleData1.forEach(function (item, i) {
                              item.industry = me.selIndustry(item.industry);
                        });
                  }else {
                        console.log(data.json().message);
                  }
            });
      }
      public initTableData5(): void {
            const url = this.configService.get('url') + '?service=SaleDashboard&method=getNewOrderTop5';
            this.http.post(url, null).toPromise().then(data => {
                  if (data.json().code === '0000') {
                        this.singleData2 = data.json().info;
                        // console.log(this.singleData2);
                  }else {
                        console.log(data.json().message);
                  }
            });
      }
      public selIndustry(val) {
            this.translate.get('home.homepage.salesportal.business').subscribe((res: any) => {
                  switch (val) {
                        case '0': val = res.item0;
                              break;
                        case '1': val = res.item1;
                              break;
                        case '2': val = res.item2;
                              break;
                        case '3': val = res.item3;
                              break;
                        case '4': val = res.item4;
                              break;
                        case '5': val = res.item5;
                              break;
                        case '6': val = res.item6;
                              break;
                        case '7': val = res.item7;
                              break;
                        case '8': val = res.item8;
                              break;
                        case '9': val = res.item9;
                              break;
                        case '10': val = res.item10;
                              break;
                        case '11': val = res.item11;
                              break;
                        case '12': val = res.item12;
                              break;
                        case '13': val = res.item13;
                              break;
                        case '14': val = res.item14;
                              break;
                        default: val = res.item15;
                  }
            });
            return val;
      }
}
